import React from 'react'
import {Form,Input, Button,Icon,Checkbox,message} from 'antd';
import http from '../api/http'
import api from '../api/api'
import './css/login.css'
class NormalLoginForm extends React.Component {
    constructor(props){
        super(props)
        this.state={
            buttonLoding:false
        }
    }
    // 表单提交
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                var data = {'userName': values.username,'password':values.password,'code':111}
                this.setState({buttonLoding:true})
                http.post(api.login,data).then((res)=>{
                    console.log(res)
                    if(res.code === 0){
                        localStorage.setItem('userinfo',JSON.stringify(res.data))
                        this.props.history.push('/admininfo')
                    }else{
                        message.warning(res.data);
                    }
                    this.setState({buttonLoding:false})
                })
            }
        });
    };
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className='login'>
                <Form onSubmit={this.handleSubmit} className="login-form from">
                    <div><h2 style={{color:'#ffffff'}}>后台系统登陆</h2></div>
                    <Form.Item>
                        {getFieldDecorator('username', {rules: [{ required: true, message: '请输入账户' }],})(
                        <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="账户"/>,)}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('password', {rules: [{ required: true, message: '请输入密码' }],})(
                        <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />,)}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('remember', {valuePropName: 'checked',initialValue: true,})(<Checkbox style={{color:'#ffffff'}}>记住密码</Checkbox>)}
                        <br></br>
                        <Button type="primary" size='large' htmlType="submit" className="login-form-button" block loading={this.state.buttonLoding}>登陆</Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }
}
  
const LoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);
  
export default LoginForm;